<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>
<head>
<title>收信箱</title>
<link href="${ctx}/static/v2/css/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
 <script type='text/javascript' src="${ctx}/static/v2/css/fastclick/fastclick.min.js"></script>
</head>

       
<body>
		                        


 <!-- Main content -->
	<section class="content-header">
		<h4>
			站内信箱 <small> 你有 <b><span class="text-red">13</span>
			</b> 条新站内信</small>
		</h4>
	</section>

	<section class="content">
          <div class="row">
            <div class="col-md-3">
              <a href="${ctx}/jsp/mailbox/compose.jsp" class="btn btn-primary btn-block margin-bottom-10"><i class="fa fa-pencil"></i> 写信</a>
              <div class="box box-solid">
                <div class="box-header with-border">
                  <h3 class="box-title">文件夹</h3>
                    <div class="box-tools  pull-right">
                     <button class="btn btn-default btn-sm" data-widget="collapse">
                       <i class="fa fa-minus"></i></button>
                     </div> 
              
                </div>
                <div class="box-body no-padding">
                  <ul class="nav nav-pills nav-stacked">
                    <li class="active"><a href="${ctx}/jsp/mailbox/mailbox.jsp"><i class="fa fa-inbox"></i> 收信箱 <span class="label label-primary pull-right">12</span></a></li>
                    <li><a href="#"><i class="fa fa-envelope-o"></i> 发信箱</a></li>
                    <li><a href="#"><i class="fa fa-file-text-o"></i> 草稿箱</a></li>
                    <li><a href="#"><i class="fa fa-trash-o"></i> 垃圾箱</a></li>
                  </ul>
                </div><!-- /.box-body -->
              </div><!-- /. box -->
              <div class="box box-solid">
                <div class="box-header with-border">
                  <h3 class="box-title">文件分类</h3>
                  <div class="box-tools  pull-right">
                     <button class="btn btn-default btn-sm" data-widget="collapse">
                       <i class="fa fa-minus"></i></button>
                     </div> 
                </div>
                <div class="box-body no-padding">
                  <ul class="nav nav-pills nav-stacked">
                    <li><a href="#"><i class="fa fa fa-circle-o text-red"></i>重要文件</a></li>
                    <li><a href="#"><i class="fa fa fa-circle-o text-yellow"></i> 待处理文件</a></li>
                    <li><a href="#"><i class="fa fa fa-circle-o text-blue"></i> 日常文件</a></li>
                  </ul>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
            
            <div class="col-md-9">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h4 class="box-title" style="font-size: 18px;">收信箱</h4>
                  <div class="box-tools pull-right">
							<div class="has-feedback">
								<input class="form-control input-sm" type="text"
									placeholder="信件搜索"> <span
									class="glyphicon glyphicon-search form-control-feedback"></span>
							</div>
						</div><!-- /.box-tools -->
                </div><!-- /.box-header -->
                <div class="box-body no-padding">
                  <div class="mailbox-controls">
                    <!-- Check all button -->
                    <button class="btn btn-default btn-sm checkbox-toggle" data-toggle="tooltip" title="全选"><i class="fa fa-square-o"></i></button>
                    <div class="btn-group">
                      <button class="btn btn-default btn-sm" data-toggle="tooltip" title="删除"><i class="fa fa-trash-o" ></i></button>
                      <button class="btn btn-default btn-sm" data-toggle="tooltip" title="回复"><i class="fa fa-reply"></i></button>
                      <button class="btn btn-default btn-sm" data-toggle="tooltip" title="转发"><i class="fa fa-share"></i></button>
                    </div><!-- /.btn-group -->
                    <button class="btn btn-default btn-sm" data-toggle="tooltip"  title="刷新" ><i class="fa fa-refresh" ></i></button>
                    <div class="pull-right">
                      1-50/200
                      <div class="btn-group">
                        <button class="btn btn-default btn-sm" data-toggle="tooltip"  title="上一页"><i class="fa fa-chevron-left"></i></button>
                        <button class="btn btn-default btn-sm" data-toggle="tooltip"  title="下一页"><i class="fa fa-chevron-right"></i></button>
                      </div><!-- /.btn-group -->
                    </div><!-- /.pull-right -->
                  </div>
                  <div class="table-responsive mailbox-messages">
                    <table class="table table-hover table-striped">
                      <tbody>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="${ctx}/jsp/mailbox/read-mail.jsp">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"></td>
                          <td class="mailbox-date">5分钟前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="${ctx}/jsp/mailbox/read-mail.jsp">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">28分钟前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="${ctx}/jsp/mailbox/read-mail.jsp">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">11小时前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="${ctx}/jsp/mailbox/read-mail.jsp">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 这个问题已经找到解决办法，会尽快出示说明文档...</td>
                          <td class="mailbox-attachment"></td>
                          <td class="mailbox-date">15小时</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="${ctx}/jsp/mailbox/read-mail.jsp">管理员</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 这个问题已经找到解决办法，会尽快出示说明文档...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">昨天</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="${ctx}/jsp/mailbox/read-mail.jsp">管理员</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 这个问题已经找到解决办法，会尽快出示说明文档...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">2天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">2天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"></td>
                          <td class="mailbox-date">2天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"></td>
                          <td class="mailbox-date">2天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">测试</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"></td>
                          <td class="mailbox-date">2天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">管理员</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 这个问题已经找到解决办法，会尽快出示说明文档...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">4天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">管理员</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 这个问题已经找到解决办法，会尽快出示说明文档...</td>
                          <td class="mailbox-attachment"></td>
                          <td class="mailbox-date">12天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star-o text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">管理员</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 这个问题已经找到解决办法，会尽快出示说明文档...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">12天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">管理员</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 这个问题已经找到解决办法，会尽快出示说明文档...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">14天前</td>
                        </tr>
                        <tr>
                          <td><input type="checkbox" /></td>
                          <td class="mailbox-star"><a href="#"><i class="fa fa-star text-yellow"></i></a></td>
                          <td class="mailbox-name"><a href="#">管理员</a></td>
                          <td class="mailbox-subject"><b>紧急待处理bug</b> - 希望能快速找到解决这个问题的办法...</td>
                          <td class="mailbox-attachment"><i class="fa fa-paperclip"></i></td>
                          <td class="mailbox-date">15天前</td>
                        </tr>
                      </tbody>
                    </table><!-- /.table -->
                  </div><!-- /.mail-box-messages -->
                </div><!-- /.box-body -->
              </div><!-- /. box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
   
   
   
    <!-- Page Script -->
    <script>
      $(function () {
        //Enable iCheck plugin for checkboxes
        //iCheck for checkbox and radio inputs
        $('.mailbox-messages input[type="checkbox"]').iCheck({
          checkboxClass: 'icheckbox_flat-blue',
          radioClass: 'iradio_flat-blue'
        });

        //Enable check and uncheck all functionality
        $(".checkbox-toggle").click(function () {
          var clicks = $(this).data('clicks');
          if (clicks) {
            //Uncheck all checkboxes
            $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
            $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
          } else {
            //Check all checkboxes
            $(".mailbox-messages input[type='checkbox']").iCheck("check");
            $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
          }
          $(this).data("clicks", !clicks);
        });

        //Handle starring for glyphicon and font awesome
        $(".mailbox-star").click(function (e) {
          e.preventDefault();
          //detect type
          var $this = $(this).find("a > i");
          var glyph = $this.hasClass("glyphicon");
          var fa = $this.hasClass("fa");

          //Switch states
          if (glyph) {
            $this.toggleClass("glyphicon-star");
            $this.toggleClass("glyphicon-star-empty");
          }

          if (fa) {
            $this.toggleClass("fa-star");
            $this.toggleClass("fa-star-o");
          }
        });
      });
    </script>
</body>
</html>